<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书馆座位预约系统 - 修改密码</title>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        /* 与个人信息页完全一致的通用样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        body {
            background-color: #f0f8ff;
            min-height: 100vh;
            color: #333;
            display: flex;
            flex-direction: column;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            flex: 1;
        }
        .main-header {
            background-color: rgba(255, 255, 255, 0.95);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 15px 0;
        }
        .header-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.5rem;
            font-weight: bold;
            color: #1a2a6c;
        }
        .main-nav ul {
            display: flex;
            list-style: none;
            gap: 20px;
        }
        .main-nav a {
            text-decoration: none;
            color: #333;
            padding: 8px 15px;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        .main-nav a:hover, .main-nav li.active a {
            background-color: #1a73e8;
            color: white;
        }
        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .welcome {
            font-weight: 500;
        }
        .main-content {
            flex: 1;
            padding: 20px 0;
        }
        .profile-container {
            display: flex;
            gap: 30px;
        }
        .profile-sidebar {
            flex: 0 0 300px;
        }
        .profile-content {
            flex: 1;
        }
        .user-card {
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            padding: 25px;
            margin-bottom: 30px;
            text-align: center;
        }
        .profile-avatar {
            font-size: 4rem;
            color: #1a2a6c;
            margin-bottom: 15px;
        }
        .user-name {
            color: #1a2a6c;
            margin-bottom: 10px;
            font-size: 1.5rem;
        }
        .user-id {
            color: #7f8c8d;
            margin-bottom: 20px;
        }
        .profile-nav ul {
            list-style: none;
        }
        .profile-nav li {
            margin-bottom: 5px;
        }
        .profile-nav a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 15px 20px;
            text-decoration: none;
            color: #333;
            border-radius: 8px;
            transition: all 0.3s;
        }
        .profile-nav a:hover, .profile-nav li.active a {
            background-color: #1a73e8;
            color: white;
        }
        .profile-section {
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            padding: 25px;
            margin-bottom: 30px;
        }
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        .section-header h2 {
            color: #1a2a6c;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s;
            font-size: 0.9rem;
        }
        .btn-primary {
            background: #1a73e8;
            color: white;
        }
        .btn-primary:hover:not(:disabled) {
            background: #0d62d9;
        }
        .pwd-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
            max-width: 500px;
        }
        .pwd-form .form-group {
            display: flex;
            flex-direction: column;
        }
        .pwd-form label {
            font-weight: 500;
            color: #1a2a6c;
            margin-bottom: 8px;
        }
        .pwd-form input {
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
        }
        .pwd-form input:focus {
            outline: none;
            border-color: #1a73e8;
        }
        .error-tip {
            color: #e53935;
            font-size: 0.85rem;
            margin-top: 4px;
            display: none;
        }
        @media (max-width: 768px) {
            .header-container, .profile-container {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
<header class="main-header">
    <div class="header-container">
        <div class="logo"><span>图书馆座位预约系统</span></div>
        <nav class="main-nav">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="seat-selection.html">座位选择</a></li>
                <li><a href="booking-management.html">预约查询</a></li>
                <li><a href="user-profile.html">个人中心</a></li>
            </ul>
        </nav>
        <div class="user-info"><span class="welcome" id = "welcomeText">欢迎，张三同学</span></div>
    </div>
</header>

<main class="main-content">
    <div class="container profile-container">
        <!-- 左侧边栏 -->
        <aside class="profile-sidebar">
            <div class="user-card">
                <div class="profile-avatar"><i class="fa fa-user-circle-o"></i></div>
                <h3 class="user-name" id="sidebarUsername">加载中...</h3>
                <p class="user-id" id="sidebarUserid">学号：加载中...</p>
                <nav class="profile-nav">
                    <ul>
                        <li><a href="user-profile.html"><i class="fa fa-id-card"></i> 个人信息</a></li>
                        <li class="active"><a href="change-password.html"><i class="fa fa-shield"></i> 修改密码</a></li>
                        <li><a href="login.html"><i class="fa fa-sign-out"></i> 退出登录</a></li>
                    </ul>
                </nav>
            </div>
        </aside>

        <!-- 右侧内容 -->
        <div class="profile-content">
            <section class="profile-section">
                <div class="section-header">
                    <h2><i class="fa fa-key"></i> 修改密码</h2>
                </div>
                <form class="pwd-form" id="pwdForm">
                    <div class="form-group">
                        <label>用户名</label>
                        <input type="text" id="username" class="form-control" readonly>
                    </div>
                    <div class="form-group">
                        <label>新密码</label>
                        <input type="password" id="newPwd" required placeholder="6-20 位字母、数字或符号">
                    </div>
                    <div class="form-group">
                        <label>确认新密码</label>
                        <input type="password" id="confirmPwd" required placeholder="请再次输入新密码">
                        <span class="error-tip" id="errorTip">两次新密码输入不一致</span>
                        <span class="success-message" id="successMessage">密码修改成功</span>
                    </div>
                    <button type="submit" class="btn btn-primary" id="submitBtn">保存</button>
                </form>
            </section>
        </div>
    </div>
</main>

<script>
    // 全局变量
    let currentUser = '';

    // 页面加载时获取用户信息
    document.addEventListener('DOMContentLoaded', function() {
        currentUser = sessionStorage.getItem('currentUser');
        if (!currentUser) {
            alert('请先登录');
            window.location.href = 'login.html';
            return;
        }

        loadUserInfo();
        setupPasswordForm();
    });

    // 加载用户信息
    function loadUserInfo() {
        fetch(`http://localhost:8080/api/user/get-info?username=${currentUser}`)
            .then(response => response.json())
            .then(student => {
                console.log('Student:', JSON.stringify(student, null, 2));
                // 更新页面显示
                document.getElementById('welcomeText').textContent = `欢迎，${student.username}同学`;
                document.getElementById('sidebarUsername').textContent = student.username || '用户';
                document.getElementById('sidebarUserid').textContent = `学号：${student.username}`;
                document.getElementById('username').value = student.username;
            })
            .catch(err => {
                console.error('Error loading user info:', err);
                alert('加载用户信息失败');
            });
    }

    // 设置密码修改表单
    function setupPasswordForm() {
        const pwdForm = document.getElementById('pwdForm');
        const newPwd = document.getElementById('newPwd');
        const confirmPwd = document.getElementById('confirmPwd');
        const errorTip = document.getElementById('errorTip');
        const successMessage = document.getElementById('successMessage');
        const submitBtn = document.getElementById('submitBtn');

        pwdForm.addEventListener('submit', function (e) {
            e.preventDefault();

            // 验证密码
            if (newPwd.value !== confirmPwd.value) {
                errorTip.style.display = 'inline';
                successMessage.style.display = 'none';
                confirmPwd.focus();
                return;
            }

            if (newPwd.value.length < 6) {
                alert('密码长度至少6位');
                return;
            }

            errorTip.style.display = 'none';

            // 显示加载状态
            submitBtn.disabled = true;
            submitBtn.textContent = '修改中...';
            pwdForm.classList.add('loading');

            // 发送修改密码请求
            fetch('http://localhost:8080/api/user/change-pw', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    username: currentUser,
                    newPassword: newPwd.value
                })
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        successMessage.style.display = 'inline';
                        errorTip.style.display = 'none';
                        pwdForm.reset();
                        setTimeout(() => {
                            successMessage.style.display = 'none';
                        }, 3000);
                    } else {
                        alert('密码修改失败: ' + data.message);
                    }
                })
                .catch(err => {
                    console.error('Error:', err);
                    alert('密码修改失败，请检查网络连接');
                })
                .finally(() => {
                    // 恢复按钮状态
                    submitBtn.disabled = false;
                    submitBtn.textContent = '保存';
                    pwdForm.classList.remove('loading');
                });
        });
    }

    // 退出登录
    function logout() {
        sessionStorage.removeItem('currentUser');
        window.location.href = 'login.html';
    }
</script>
</body>
</html>